<template>
  <div class="wrap" :class="{'hello-wrap':hello==true,'luckly':luckly==true}">

    <transition :duration="3000"  name="fade" mode="out-in">
      <div id="hello" v-show="hello">
        <div  id="js-hello-shu" class="hello-shu"  ></div>
      </div>
    </transition>


    <div  id="my_canvas"></div>
    <div class="staff-name-box" v-show="start">
      <staff-name
        v-for="(staff,idx) in user_list"
        :key="idx"
      >
        {{staff}}
      </staff-name>
    </div>

    <transition :duration="3000"  name="fade" mode="out-in">
      <div class="actions"  v-show="hello">
        <div class="open-luck-btn" @click="open_luckly(1)">1人中奖</div>
        <div class="open-luck-btn" @click="open_luckly(3)">3人中奖</div>
        <div class="open-luck-btn" @click="open_luckly(5)">5人中奖</div>
      </div>
    </transition>


    <div class="start-btn" v-show="!start && !hello">开始抽奖</div>
  </div>
</template>

<script lang="ts">
  import {
    Vue,
    Component
  } from 'vue-property-decorator'
  import StaffName from '@/components/StaffName'
  import {Luckly} from '@/fun/Luckly'

  const echarts = require('echarts');
  require('echarts-wordcloud');
  import {laoshu5 as maskImageData} from "./maskImageData";

  @Component({
    components: {
      StaffName
    }
  })
  export default class Home extends Vue {

    hello = true
    luckly = false

    start = false
    user_list = []

    canvasInstance = null

    open_luckly(rate_num){
      //document.getElementById('js-hello-shu').style.width = '200px'
      this.hello = false

      setTimeout(()=>{

        this.luckly = true

        this.$nextTick().then(()=>{



        })

      },1000)

    }

    async created() {

      this.user_list = await Luckly.getUserList()

      this.$nextTick().then(()=>{
        let bodyHeight = document.body.offsetHeight;
        document.getElementById('my_canvas').style.width = bodyHeight - 100 + 'px'
        this.canvasInstance = echarts.init(document.getElementById('my_canvas'));
        var maskImage = new Image();
        maskImage.src = maskImageData

        this.canvasInstance.setOption({
          series: [{
            type: 'wordCloud',
            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

            // shape: 'circle',

            // A silhouette image which the white area will be excluded from drawing texts.
            // The shape option will continue to apply as the shape of the cloud to grow.

            maskImage: maskImage,

            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.

            // left: 'center',
            // top: 'center',
            width: '100%',
            height: '100%',

            // right: null,
            // bottom: null,

            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.

            sizeRange: [10, 30],

            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

            rotationRange: [-90, 90],
            rotationStep: 45,

            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.

            gridSize: 6,

            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            drawOutOfBound: false,

            // Global text style
            textStyle: {
              normal: {
                // fontFamily: 'sans-serif',
                // fontWeight: 'bold',
                // Color can be a callback function or a color string
                color: function () {
                  // Random color
                  return '#fff';
                  return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') + ')';
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#999'
              }
            },

            // Data is an array. Each array item must have name and value property.
            data: this.user_list
          }]
        })

      })


    }

  }
</script>

<style lang="stylus" scoped>
.fade-enter-active, .fade-leave-active {
  /*animation: opacity 3s*/
  animation: bounceT 3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  animation: bounceT 2s;
}
@keyframes bounceT {
  0% {
    opacity 1
  }
  10% {
    opacity .9
  }
  20% {
    opacity .8
  }
  30% {
    opacity .7
  }
  40% {
    opacity 0.6
  }
  50% {
    opacity 0.5
  }
  60% {
    opacity 0.4
  }
  70% {
    opacity 0.3
  }
  80% {
    opacity 0.2
  }
  90% {
    opacity 0.1
  }
  100% {
    opacity 0
  }
}
.wrap
  position relative
  height 100vh
  &.luckly
    background #ce2722
  &.hello-wrap
    background #fff
.start-btn
  color white
  border 1px solid #fff
  padding 10px 25px
  font-size 18px
  width 140px
  height 30px
  line-height 30px
  position absolute
  left 50%
  bottom 25px
  transform translateX(-50%)
  cursor pointer
  animation warn 2s ease-out infinite;
  letter-spacing 4px
  &:hover
    background rgba(255,255,255,0.4)
    border 1px solid rgba(255,255,255,0.4)

#my_canvas
  position absolute
  z-index 1
  left 50%
  top 20px
  bottom 80px
  transform translateX(-50%)

#hello
  position absolute
  z-index 2
  width 100%
  top 20px
  bottom 80px
  text-align center
  .hello-shu
    width 100%
    height 100%
    background-image url('~@/assets/hello.png')
    background-size contain
    background-repeat no-repeat
    background-position center



.actions
  z-index 2
  width 100%
  height 52px
  position absolute
  bottom 25px
  display flex
  justify-content center
  align-items center
  .open-luck-btn
    color #fff
    background rgba(255,0,0,.8)
    border 1px solid red
    padding 10px 25px
    font-size 18px
    width 140px
    line-height 30px
    height 30px
    cursor pointer
    animation warn 2s ease-out infinite;
    letter-spacing 4px
    margin-right 25px
    &:last-child
      margin-right 0
    &:hover
      background red
      border 1px solid red
      color white


</style>
